<template>
  <div class="weather">
    <div class="a a0">
      <div class="b">{{city}}</div>
    </div>
    <div class="a a1">
      <div class="b">{{wendu}}℃</div>
      <div class="b">{{type}}</div>
    </div>
    <el-popover
      popper-class="weather_popover"
      placement="top-start"
      width="600"
      trigger="hover">
      <div class="weather_popover">
        <div class="title">未来五天天气</div>
        <div class="content">
          <div class="top">
            <p>{{date}}</p>
          </div>
          <div class="center">
            <ul>
              <li v-for="(item,index) in weatherList" :key="index" v-if="index===0">
                <span class="iconfont" :class="icon"></span>
                <div class="temperature">
                  <span>{{wendu}}</span>
                  <span>
                    <i>℃</i>
                    <i>{{item.type}}</i>
                  </span>
                </div>
                <div class="differ">
                  <span>{{item.low.slice(2,5)}}</span>
                  ~
                  <span>{{item.high.slice(2,5)}}</span>
                  ℃
                </div>
                <div class="type">
                  <span>{{item.type}}</span>
                </div>
                <div class="wind">
                  <span>{{item.fengxiang}}</span>
                  <span>{{item.fengli}}</span>
                </div>
                <div class="air_quality">
                  <span>优</span>
                </div>
              </li>
              <li v-for="(item,index) in weatherList" :key="index" v-if="index>0">
                <div class="week">
                  <p>周{{item.date.slice([...item.date].length-1)}}</p>
                  <span>{{month}}月</span>
                  <span>{{item.date.slice(0,1)}}日</span>
                </div>
                <span class="iconfont" :class="item.icon"></span>
                <div class="differ">
                  <span>{{item.low.slice(2,5)}}</span>
                  ~
                  <span>{{item.high.slice(2,5)}}</span>
                  ℃
                </div>
                <div class="type">
                  <span>{{item.type}}</span>
                </div>
                <div class="wind">
                  <span>{{item.fengxiang}}</span>
                  <span>{{item.fengli}}</span>
                </div>
                <div class="air_quality">
                  <span>优</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="bottom"></div>
        </div>
      </div>
      <el-button class="icon" slot="reference">
        <span class="iconfont" :class="icon"></span>
      </el-button>
    </el-popover>
  </div>
</template>

<script>
  import { getLunar } from 'chinese-lunar-calendar'
  import { getWeather } from '../api/weather.js'
  export default {
    name: "weather",
    data() {
      return {
        city: '济南',
        wendu: 0,
        type: '',
        icon: '',
        weatherList: [],
        iconList: [
          { type: '大雨', icon: 'icon-dayu' },
          { type: '多云', icon: 'icon-duoyun' },
          { type: '雷阵雨', icon: 'icon-leidian' },
          { type: '晴', icon: 'icon-qing' },
          { type: '小雨', icon: 'icon-xiaoyu' },
          { type: '雪', icon: 'icon-xue' },
          { type: '阴', icon: 'icon-yintian' }
        ],
        weekList: [
          { value: 1, label: '周一' },
          { value: 2, label: '周二' },
          { value: 3, label: '周三' },
          { value: 4, label: '周四' },
          { value: 5, label: '周五' },
          { value: 6, label: '周六' },
          { value: 7, label: '周日' },
        ],
        date: '',
        month: ''
      }
    },
    watch: {
      type: {
        handler(newValue) {
          let iconInfo = this.iconList.filter(item => item.type === newValue);
          if(iconInfo.length>0) {
            this.icon = iconInfo[0].icon;
          }else{
            this.icon = ''
          }
        },
        immediate: true
      }
    },
    created() {
      this.getWeaAndTem();
      this.getDate()
    },
    methods: {
      async getWeaAndTem() {
        const res = await getWeather({
          city: this.city
        });
        if(res.status === 200) {
          let data = res.data.data;
          let wendu = data.wendu;
          let type = data.forecast[0].type;
          let weatherList = data.forecast;
          this.wendu = wendu;
          this.type = type;
          this.weatherList = weatherList;
          this.weatherList.forEach(item => {
            item.icon = '';
            let str = item.fengli.toString();
            let length = [...str].length;
            let fengli = str.slice((str.indexOf('A')+4),(length-3));
            item.fengli = fengli;
            let iconInfo = this.iconList.filter(item1 => item1.type === item.type);
            if(iconInfo.length) {
              item.icon = iconInfo[0].icon
            }
          });
        }
      },
      get() {
        let cd = new Date();
        let date = this.formatDate(cd);
        this.date = date
      },
      getDate() {
        let timer = this.timer;
        this.get();
        timer = setInterval(() => {
          this.get()
        }, 18000000);   // 五小时一获取
      },
      formatDate(cd) {
        let Y = cd.getFullYear();  // 年
        let M = cd.getMonth()+1<10?('0'+(cd.getMonth()+1)):(cd.getMonth()+1);  // 月
        let D = cd.getDate()<10?('0'+cd.getDate()):cd.getDate();  // 日
        let W = cd.getDay();  // 周
        let m = cd.getMinutes()<10?('0'+cd.getMinutes()):cd.getMinutes();  // 分钟
        let s = cd.getSeconds()<10?('0'+cd.getSeconds()):cd.getSeconds();  // 秒
        let w = this.weekList.filter(item => item.value === W)[0];
        let lunarDay = getLunar(Y,M,D);  // 农历
        this.month = M;
        return M + '月' + D + '日 ' + w.label + ' 农历' + lunarDay.dateStr

      }
    }
  }
</script>

<style scoped lang="scss">
  .weather {
    width: 100%;
    height: 50px;
    /*border: 1px solid red;*/
    display: flex;
    justify-content: center;
    align-items: center;
    .a0{
      .b{
        font-size: 16px;
        margin-right: 6px;
        color: #ddd;
      }
    }
    .a1{
      .b{
        font-size: 13px;
        color: #ddd;
      }
    }
  }
  /deep/ .icon{
    background: transparent;
    padding: 0;
    border: none;
    color: #ddd;
    span.iconfont{
      font-size: 20px;
      margin-left: 8px;
      color: #ddd;
    }
  }
  div.weather_popover{
    padding: 10px;
    background-image: linear-gradient(to bottom, rgba(37, 171, 147, 0.2), rgba(37, 171, 147, 0.1));
    color: #fff;
    .title{
      font-size: 16px;
      letter-spacing: 1px;
      padding: 4px 0;
      background-image: -webkit-linear-gradient(top, #fff, rgba(37, 171, 147, 1), rgba(37, 171, 147, 0.7));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .content{
      .center{
        ul{
          display: flex;
          li{
            width: 100px;
            padding: 8px 0;
            border-radius: 4px;
            text-align: center;
            .temperature{
              height: 50px;
              display: flex;
              align-items: center;
              justify-content: center;
              span{
                font-size: 26px;
                i{
                  display: block;
                  text-align: left;
                  margin-left: 3px;
                }
              }
            }
            .week{
              height: 50px;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: center;
              P{
                width: 100%;
              }
            }
            span.iconfont{
              display: inline-block;
              height: 40px;
              font-size: 30px;
              line-height: 40px;
            }
            .differ{
              margin: 4px 0;
            }
            .type{
              margin-bottom: 3px;
              span{
                font-size: 13px;
              }
            }
            .air_quality{
              margin: 4px 0 6px;
              span{
                display: inline-block;
                padding: 1px 10px;
                border-radius: 2px;
                font-size: 8px;
                background-image: linear-gradient(to bottom, rgba(37, 171, 147, 1), rgba(37, 171, 147, 0.7));
              }
            }
          }
          li:first-child{
            width: calc(100% - 400px);
          }
          li:hover{
            cursor: pointer;
            background: rgba(255,255,255,0.1);
          }
        }
      }
    }
  }
</style>
<style>
  .el-popover.weather_popover {
    background: rgba(0,0,0,0.7);
    border-color: #888;
    padding: 0;
  }
  .weather_popover .el-popover__title {
    color: white;
  }
  .weather_popover .popper__arrow::after {
    border-bottom-color: #090d29 !important;
  }
</style>
